<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>Slider - FLATY Admin</title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <!--base css styles-->
        <link rel="stylesheet" href="assets/bootstrap/bootstrap.min.css">
        <link rel="stylesheet" href="assets/bootstrap/bootstrap-responsive.min.css">
        <link rel="stylesheet" href="assets/font-awesome/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/normalize/normalize.css">

        <!--page specific css styles-->
        <link rel="stylesheet" href="assets/jquery-ui/jquery-ui.min.css">

        <!--flaty css styles-->
        <link rel="stylesheet" href="css/flaty.css">
        <link rel="stylesheet" href="css/flaty-responsive.css">

        <link rel="shortcut icon" href="img/favicon.html">

        <script src="assets/modernizr/modernizr-2.6.2.min.js"></script>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
        <![endif]-->

        <!-- BEGIN Theme Setting -->
        <div id="theme-setting">
            <a href="#"><i class="icon-gears icon-2x"></i></a>
            <ul>
                <li>
                    <span>Skin</span>
                    <ul class="colors" data-target="body" data-prefix="skin-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Navbar</span>
                    <ul class="colors" data-target="#navbar" data-prefix="navbar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span>Sidebar</span>
                    <ul class="colors" data-target="#main-container" data-prefix="sidebar-">
                        <li class="active"><a class="blue" href="#"></a></li>
                        <li><a class="red" href="#"></a></li>
                        <li><a class="green" href="#"></a></li>
                        <li><a class="orange" href="#"></a></li>
                        <li><a class="yellow" href="#"></a></li>
                        <li><a class="pink" href="#"></a></li>
                        <li><a class="magenta" href="#"></a></li>
                        <li><a class="gray" href="#"></a></li>
                        <li><a class="black" href="#"></a></li>
                    </ul>
                </li>
                <li>
                    <span></span>
                    <a data-target="navbar" href="#"><i class="icon-check-empty"></i> Fixed Navbar</a>
                    <a class="pull-right visible-desktop" data-target="sidebar" href="#"><i class="icon-check-empty"></i> Fixed Sidebar</a>
                </li>
            </ul>
        </div>
        <!-- END Theme Setting -->

        <!-- BEGIN Navbar -->
        <div id="navbar" class="navbar">
            <div class="navbar-inner">
                <div class="container-fluid">
                    <!-- BEGIN Brand -->
                    <a href="#" class="brand">
                        <small>
                            <i class="icon-desktop"></i>
                            FLATY Admin
                        </small>
                    </a>
                    <!-- END Brand -->

                    <!-- BEGIN Responsive Sidebar Collapse -->
                    <a href="#" class="btn-navbar collapsed" data-toggle="collapse" data-target=".nav-collapse">
                        <i class="icon-reorder"></i>
                    </a>
                    <!-- END Responsive Sidebar Collapse -->

                    <!-- BEGIN Navbar Buttons -->
                    <ul class="nav flaty-nav pull-right">
                        <!-- BEGIN Button Tasks -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-tasks"></i>
                                <span class="badge badge-warning">4</span>
                            </a>

                            <!-- BEGIN Tasks Dropdown -->
                            <ul class="pull-right dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-ok"></i>
                                    4 Tasks to complete
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Software Update</span>
                                            <span class="pull-right">75%</span>
                                        </div>

                                        <div class="progress progress-mini progress-warning">
                                            <div style="width:75%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Transfer To New Server</span>
                                            <span class="pull-right">45%</span>
                                        </div>

                                        <div class="progress progress-mini progress-danger">
                                            <div style="width:45%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Bug Fixes</span>
                                            <span class="pull-right">20%</span>
                                        </div>

                                        <div class="progress progress-mini">
                                            <div style="width:20%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <div class="clearfix">
                                            <span class="pull-left">Writing Documentation</span>
                                            <span class="pull-right">85%</span>
                                        </div>

                                        <div class="progress progress-mini progress-success progress-striped active">
                                            <div style="width:85%" class="bar"></div>
                                        </div>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See tasks with details</a>
                                </li>
                            </ul>
                            <!-- END Tasks Dropdown -->
                        </li>
                        <!-- END Button Tasks -->

                        <!-- BEGIN Button Notifications -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-bell-alt"></i>
                                <span class="badge badge-important">5</span>
                            </a>

                            <!-- BEGIN Notifications Dropdown -->
                            <ul class="dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-warning-sign"></i>
                                    5 Notifications
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-comment orange"></i>
                                        <p>New Comments</p>
                                        <span class="badge badge-warning">4</span>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-twitter blue"></i>
                                        <p>New Twitter followers</p>
                                        <span class="badge badge-info">7</span>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar2.jpg" alt="Alex" />
                                        <p>David would like to become moderator.</p>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-bug pink"></i>
                                        <p>New bug in program!</p>
                                    </a>
                                </li>

                                <li class="notify">
                                    <a href="#">
                                        <i class="icon-shopping-cart green"></i>
                                        <p>You have some new orders</p>
                                        <span class="badge badge-success">+10</span>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See all notifications</a>
                                </li>
                            </ul>
                            <!-- END Notifications Dropdown -->
                        </li>
                        <!-- END Button Notifications -->

                        <!-- BEGIN Button Messages -->
                        <li class="hidden-phone">
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                                <i class="icon-envelope"></i>
                                <span class="badge badge-success">3</span>
                            </a>

                            <!-- BEGIN Messages Dropdown -->
                            <ul class="dropdown-navbar dropdown-menu">
                                <li class="nav-header">
                                    <i class="icon-comments"></i>
                                    3 Messages
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar3.jpg" alt="Sarah's Avatar" />
                                        <div>
                                            <span class="msg-title">Sarah</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>a moment ago</span>
                                            </span>
                                        </div>
                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                                    </a>
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar4.jpg" alt="Emma's Avatar" />
                                        <div>
                                            <span class="msg-title">Emma</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>2 Days ago</span>
                                            </span>
                                        </div>
                                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris ...</p>
                                    </a>
                                </li>

                                <li class="msg">
                                    <a href="#">
                                        <img src="img/demo/avatar/avatar5.jpg" alt="John's Avatar" />
                                        <div>
                                            <span class="msg-title">John</span>
                                            <span class="msg-time">
                                                <i class="icon-time"></i>
                                                <span>8:24 PM</span>
                                            </span>
                                        </div>
                                        <p>Duis aute irure dolor in reprehenderit in ...</p>
                                    </a>
                                </li>

                                <li class="more">
                                    <a href="#">See all messages</a>
                                </li>
                            </ul>
                            <!-- END Notifications Dropdown -->
                        </li>
                        <!-- END Button Messages -->

                        <!-- BEGIN Button User -->
                        <li class="user-profile">
                            <a data-toggle="dropdown" href="#" class="user-menu dropdown-toggle">
                                <img class="nav-user-photo" src="img/demo/avatar/avatar1.jpg" alt="Penny's Photo" />
                                <span class="hidden-phone" id="user_info">
                                    Penny
                                </span>
                                <i class="icon-caret-down"></i>
                            </a>

                            <!-- BEGIN User Dropdown -->
                            <ul class="dropdown-menu dropdown-navbar" id="user_menu">
                                <li class="nav-header">
                                    <i class="icon-time"></i>
                                    Logined From 20:45
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-cog"></i>
                                        Account Settings
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-user"></i>
                                        Edit Profile
                                    </a>
                                </li>

                                <li>
                                    <a href="#">
                                        <i class="icon-question"></i>
                                        Help
                                    </a>
                                </li>

                                <li class="divider visible-phone"></li>

                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-tasks"></i>
                                        Tasks
                                        <span class="badge badge-warning">4</span>
                                    </a>
                                </li>
                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-bell-alt"></i>
                                        Notifications
                                        <span class="badge badge-important">8</span>
                                    </a>
                                </li>
                                <li class="visible-phone">
                                    <a href="#">
                                        <i class="icon-envelope"></i>
                                        Messages
                                        <span class="badge badge-success">5</span>
                                    </a>
                                </li>

                                <li class="divider"></li>

                                <li>
                                    <a href="#">
                                        <i class="icon-off"></i>
                                        Logout
                                    </a>
                                </li>
                            </ul>
                            <!-- BEGIN User Dropdown -->
                        </li>
                        <!-- END Button User -->
                    </ul>
                    <!-- END Navbar Buttons -->
                </div><!--/.container-fluid-->
            </div><!--/.navbar-inner-->
        </div>
        <!-- END Navbar -->

        <!-- BEGIN Container -->
        <div class="container-fluid" id="main-container">
            <!-- BEGIN Sidebar -->
            <div id="sidebar" class="nav-collapse">
                <!-- BEGIN Navlist -->
                <ul class="nav nav-list">
                    <!-- BEGIN Search Form -->
                    <li>
                        <form target="#" method="GET" class="search-form">
                            <span class="search-pan">
                                <button type="submit">
                                    <i class="icon-search"></i>
                                </button>
                                <input type="text" name="search" placeholder="Search ..." autocomplete="off" />
                            </span>
                        </form>
                    </li>
                    <!-- END Search Form -->
                    <li>
                        <a href="index.html">
                            <i class="icon-dashboard"></i>
                            <span>Dashboard</span>
                        </a>
                    </li>

                    <li>
                        <a href="typography.html">
                            <i class="icon-text-width"></i>
                            <span>Typography</span>
                        </a>
                    </li>

                    <li class="active">
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-desktop"></i>
                            <span>UI Elements</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="ui_general.html">General</a></li>
                            <li><a href="ui_button.html">Button</a></li>
                            <li class="active"><a href="ui_slider.html">Slider</a></li>
                            <li><a href="ui_chart.html">Chart</a></li>
                            <li><a href="ui_message.html">Conversation</a></li>
                            <li><a href="ui_icon.html">Icon</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-edit"></i>
                            <span>Forms</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="form_layout.html">Layout</a></li>
                            <li><a href="form_component.html">Component</a></li>
                            <li><a href="form_wizard.html">Wizard</a></li>
                            <li><a href="form_validation.html">Validation</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-list"></i>
                            <span>Tables</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="table_basic.html">Basic</a></li>
                            <li><a href="table_advance.html">Advance</a></li>
                            <li><a href="table_dynamic.html">Dynamic</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>

                    <li>
                        <a href="box.html">
                            <i class="icon-list-alt"></i>
                            <span>Box</span>
                        </a>
                    </li>

                    <li>
                        <a href="calendar.html">
                            <i class="icon-calendar"></i>
                            <span>Calendar</span>
                        </a>
                    </li>

                    <li>
                        <a href="gallery.html">
                            <i class="icon-picture"></i>
                            <span>Gallery</span>
                        </a>
                    </li>

                    <li>
                        <a href="grid.html">
                            <i class="icon-th"></i>
                            <span>Griding System</span>
                        </a>
                    </li>

                    <li>
                        <a href="#" class="dropdown-toggle">
                            <i class="icon-file"></i>
                            <span>Other Pages</span>
                            <b class="arrow icon-angle-right"></b>
                        </a>

                        <!-- BEGIN Submenu -->
                        <ul class="submenu">
                            <li><a href="more_login.html">Login &amp; Register</a></li>
                            <li><a href="more_error-404.html">Error 404</a></li>
                            <li><a href="more_error-500.html">Error 500</a></li>
                            <li><a href="more_blank.html">Blank Page</a></li>
                            <li><a href="more_set-skin.html">Skin</a></li>
                            <li><a href="more_set-sidebar-navbar-color.html">Sidebar &amp; Navbar</a></li>
                            <li><a href="more_sidebar-collapsed.html">Collapsed Sidebar</a></li>
                        </ul>
                        <!-- END Submenu -->
                    </li>
                </ul>
                <!-- END Navlist -->

                <!-- BEGIN Sidebar Collapse Button -->
                <div id="sidebar-collapse" class="visible-desktop">
                    <i class="icon-double-angle-left"></i>
                </div>
                <!-- END Sidebar Collapse Button -->
            </div>
            <!-- END Sidebar -->

            <!-- BEGIN Content -->
            <div id="main-content">
                <!-- BEGIN Page Title -->
                <div class="page-title">
                    <div>
                        <h1><i class="icon-file-alt"></i> Slider</h1>
                        <h4>JqueryUI Slider and knob</h4>
                    </div>
                </div>
                <!-- END Page Title -->

                <!-- BEGIN Breadcrumb -->
                <div id="breadcrumbs">
                    <ul class="breadcrumb">
                        <li>
                            <i class="icon-home"></i>
                            <a href="index.html">Home</a>
                            <span class="divider"><i class="icon-angle-right"></i></span>
                        </li>
                        <li class="active">Slider</li>
                    </ul>
                </div>
                <!-- END Breadcrumb -->

                <!-- BEGIN Main Content -->
                <div class="row-fluid">
                    <div class="span12">
                        <div class="box">
                            <div class="box-title">
                                <h3><i class="icon-resize-horizontal"></i> Slider</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <table class="table table-striped">
                                    <tbody>
                                        <tr>
                                            <td style="width:15%">Basic</td>
                                            <td>
                                                <div class="slider slider-basic handle-blue bar-blue"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Snap to increments</td>
                                            <td>
                                                <div id="slider-snap-inc" class="slider bar-large handle-green bar-green"></div>
                                                <div class="slider-value">
                                                    Amount ($100 increments):
                                                    <span id="slider-snap-inc-amount"></span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Range</td>
                                            <td>
                                                <div id="slider-range" class="slider handle-pink bar-pink"></div>
                                                <div class="slider-value">
                                                    Price range:
                                                    <span id="slider-range-amount"></span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Maximum</td>
                                            <td>
                                                <div id="slider-range-max" class="slider handle-red bar-red"></div>
                                                <div class="slider-value">
                                                    Maximum Value:
                                                    <span id="slider-range-max-amount"></span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Minimum</td>
                                            <td>
                                                <div id="slider-range-min" class="slider handle-magenta bar-magenta"></div>
                                                <div class="slider-value">
                                                    Minimum Value:
                                                    <span class="slider-value" id="slider-range-min-amount"></span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Graphic EQ</td>
                                            <td>
                                                <div id="slider-eq" class="slider-eq">
                                                    <span class="bar-large bar-red handle-red">88</span>
                                                    <span class="bar-large bar-orange handle-orange">77</span>
                                                    <span class="bar-large bar-yellow handle-yellow">55</span>
                                                    <span class="bar-large bar-green handle-green">33</span>
                                                    <span class="bar-large bar-blue handle-blue">40</span>
                                                    <span class="bar-large bar-blue handle-blue">45</span>
                                                    <span class="bar-large bar-red handle-red">90</span>
                                                    <span class="bar-large bar-blue handle-blue">40</span>
                                                    <span class="bar-large bar-yellow handle-yellow">60</span>
                                                    <span class="bar-large bar-green handle-green">20</span>
                                                    <span class="bar-large bar-orange handle-orange">70</span>
                                                    <span class="bar-large bar-green handle-green">13</span>
                                                    <span class="bar-large bar-green handle-green">27</span>
                                                    <span class="bar-large bar-yellow handle-yellow">54</span>
                                                    <span class="bar-large bar-red handle-red">98</span>
                                                </div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Vertical</td>
                                            <td>
                                                <div class="slider-vertical-value">                                              
                                                    Value:
                                                    <span  class="slider-value" id="slider-vertical-amount"></span>
                                                </div>
                                                <div id="slider-vertical" class="slider handle-orange bar-orange" style="height: 200px;"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Range(Vertical)</td>
                                            <td>
                                                <div class="slider-vertical-value">
                                                    Target(Millions):
                                                    <span  class="slider-value" id="slider-range-vertical-amount"></span>
                                                </div>
                                                <div id="slider-range-vertical" class="slider handle-magenta bar-magenta" style="height: 200px;"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Default</td>
                                            <td>
                                                <div class="slider slider-color-preview"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Blue</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-blue handle-blue"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Green</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-green handle-green"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Red</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-red handle-red"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Yellow</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-yellow handle-yellow"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Orange</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-orange handle-orange"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Pink</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-pink handle-pink"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Magenta</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-magenta handle-magenta"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Magenta - Pink</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-magenta handle-pink"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Blue - Red</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-blue handle-red"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>Yellow - Orange</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-yellow handle-orange"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>bar-large</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-blue handle-blue bar-large"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>bar-xlarge</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-blue handle-blue bar-xlarge"></div>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td>bar-xxlarge</td>
                                            <td>
                                                <div class="slider slider-color-preview bar-blue handle-blue bar-xxlarge"></div>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-pink">
                            <div class="box-title">
                                <h3><i class="icon-bullseye"></i> Knob</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content">
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h4>Disable display input</h4>
                                        <input class="knob" data-width="100" data-displayInput=false value="35">
                                    </div>
                                    <div class="span4">
                                        <h4>Cursor Mode</h4>
                                        <input class="knob" data-width="150" data-cursor=true data-fgColor="#222222" data-thickness=.3 value="29">
                                    </div>
                                    <div class="span4">
                                        <h4>Display previous value</h4>
                                        <input class="knob" data-width="200" data-min="-100" data-displayPrevious=true value="44">
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="span4">
                                        <h4>Angle offset</h4>
                                        <input class="knob" data-angleOffset=90 value="35">
                                    </div>
                                    <div class="span4">
                                        <h4>Angle offset and arc</h4>
                                        <input class="knob" data-angleOffset=-125 data-angleArc=250 data-fgColor="#66EE66" value="35">
                                    </div>
                                    <div class="span4">
                                        <h4>5-digit values</h4>
                                        <input class="knob" data-min="-15000" data-max="15000" value="-11000">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row-fluid">
                    <div class="span12">
                        <div class="box box-green">
                            <div class="box-title">
                                <h3><i class="icon-circle-blank"></i> Cricle Stat</h3>
                                <div class="box-tool">
                                    <a data-action="collapse" href="#"><i class="icon-chevron-up"></i></a>
                                    <a data-action="close" href="#"><i class="icon-remove"></i></a>
                                </div>
                            </div>
                            <div class="box-content text-center">
                                <div class="row-fluid">
                                    <div class="circle-stats">
                                        <div class="span2">
                                            <div class="circle-stats-item blue">
                                                <i class="icon-user"></i>
                                                <span class="percent">%</span>
                                                <input value="23" data-fgcolor="#87ceeb" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item orange">
                                                <i class="icon-money"></i>
                                                <input value="+19" data-fgcolor="#fc812f" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item red">
                                                <i class="icon-shopping-cart"></i>
                                                <span class="percent">%</span>
                                                <input value="62" data-fgcolor="#fb5240" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item green">
                                                <i class="icon-comment"></i>
                                                <span class="percent">%</span>
                                                <input value="8" data-fgcolor="#36c77b" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2">
                                            <div class="circle-stats-item yellow">
                                                <i class="icon-bar-chart"></i>
                                                <input value="+84" data-fgcolor="#fbf040" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item pink">
                                                <i class="icon-ok"></i>
                                                <span class="percent">%</span>
                                                <input value="18" data-fgcolor="#fb40f9" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="row-fluid">
                                    <div class="circle-stats">
                                        <div class="span2">
                                            <div class="circle-stats-item magenta">
                                                <i class="icon-user"></i>
                                                <span class="percent">%</span>
                                                <input value="23" data-fgcolor="#9b2be9" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item lime">
                                                <i class="icon-money"></i>
                                                <span class="percent">%</span>
                                                <input value="-11" data-fgcolor="#b9e672" data-min="-100" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item gray">
                                                <i class="icon-shopping-cart"></i>
                                                <span class="percent">%</span>
                                                <input value="62" data-fgcolor="#999" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                        <div class="span2"> 
                                            <div class="circle-stats-item black">
                                                <i class="icon-comment"></i>
                                                <span class="percent">%</span>
                                                <input value="8" data-fgcolor="#444" data-min="0" data-min="100" />
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- END Main Content -->
                
                <footer>
                    <p>2013 © FLATY Admin Template.</p>
                </footer>

                <a id="btn-scrollup" class="btn btn-circle btn-large" href="#"><i class="icon-chevron-up"></i></a>
            </div>
            <!-- END Content -->
        </div>
        <!-- END Container -->

        <!--basic scripts-->
        <!--<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>-->
        <script>window.jQuery || document.write('<script src="assets/jquery/jquery-1.10.1.min.js"><\/script>')</script>
        <script src="assets/bootstrap/bootstrap.min.js"></script>
        <script src="assets/nicescroll/jquery.nicescroll.min.js"></script>

        <!--page specific plugin scripts-->
        <script src="assets/jquery-ui/jquery-ui.min.js"></script>
        <script src="assets/jquery-knob/jquery.knob.js"></script>

        <!--flaty scripts-->
        <script src="js/flaty.js"></script>

    </body>
</html>
